<template>
  <div class="detail">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed :title="obj.community" />
    <div class="picture">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="info">
      <div class="title">
        <p class="p1">{{obj.title}}</p>
        <p class="p2" v-if="isShow">{{obj.tags.join('/')}}</p>
      </div>
      <div class="houseInfo">
        <div class="first">
          <h3>{{obj.price}}<span>/月</span></h3>
          <p>租金</p>
        </div>
        <div class="first">
          <h3>{{obj.roomType}}</h3>
          <p>房型</p>
        </div>
        <div class="first">
          <h3>{{obj.size}}</h3>
          <p>面积</p>
        </div>
      </div>
      <div class="houseDesc">
        <div class="div">
          <p class="left">装修:</p>
          <p class="right">精装</p>
        </div>

        <div class="div">
          <p class="left">朝向:</p>
          <p class="right" v-if="isShow">{{obj.oriented.join('/')}}</p>
        </div>

        <div class="div">
          <p class="left">楼层:</p>
          <p class="right">{{obj.floor}}</p>
        </div>

        <div class="div">
          <p class="left">类型:</p>
          <p class="right">普通住宅</p>
        </div>
      </div>
    </div>

    <div class="map">
      <div class="head">
        <p class="p1">小区:</p>
        <p class="p2">{{obj.community}}</p>
      </div>
      <div class="pic">
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" ak='wfViXp1lwE8uAlvaVLGjyeEAGBD2IroD'>
          <bm-marker :position="{lng: this.center.lng, lat: this.center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
              <bm-label :content="obj.community" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -20, height: -40}"/>
          </bm-marker>
    </baidu-map>
      </div>
    </div>

    <div class="houseSup">
      <div class="head">
        <h3>房屋配套</h3>
      </div>
      <div class="icons">
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
        <div class="icon">
          <van-icon name="like-o" />
          <p>衣柜</p>
        </div>
      </div>
    </div>

    <div class="recommend">
      <div class="head">
        <h3>房源概况</h3>
      </div>
      <div class="description">
        <div class="top">
          <div class="left">
            <div class="avatar">
              <img
                src="https://t9.baidu.com/it/u=1114474532,2106671434&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=EBA2AB0BDC76468218ED9CCD0100C0A0&sec=1668358800&t=a8ddd56858154ee1dd3c404d20898e4c"
                alt=""
              />
            </div>
            <div class="user">
              <p class="name">王女士</p>
              <p class="renz">
                <van-icon name="flower-o" size="16px" />已认证房主
              </p>
            </div>
          </div>
          <div class="right">
            <p>发消息</p>
          </div>
        </div>
        <div class="bottom">
          <p>
            1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
            2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
            3.人车分流，环境优美。
            4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
          </p>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="head">
        <h3>猜你喜欢</h3>
      </div>

      <div class="content">
        <!-- 等数据传过来再引入组件 -->
        <!-- <huose-item/> -->
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMarker, BmLabel } from 'vue-baidu-map'
// import HuoseItem from '@/components/HuoseItem.vue'
import { getDetailInfo } from '@/api/house'
export default {
  name: 'detail-page',
  components: {
    BaiduMap,
    BmMarker,
    BmLabel

  },
  data () {
    return {
      images: [],
      obj: {},
      isShow: false,
      center: { lng: 0, lat: 0 },
      zoom: 3
    }
  },
  async created () {
    const code = this.$route.params.houseCode
    console.log(code)
    const res = await getDetailInfo(code)
    console.log(res)
    const image = res.body.houseImg
    image.forEach((item) => {
      item = 'http://liufusong.top:8080' + item
      this.images.push(item)
    })
    console.log(this.images)
    res.body.houseImg = this.images
    console.log(res)
    this.obj = res.body
    console.log(this.obj)
    this.center.lng = this.obj.coord.longitude
    this.center.lat = this.obj.coord.latitude
    this.isShow = true
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.detail {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #f5f5f6;
  .picture {
    width: 100%;
    height: 212px;
    background-color: #ccc;
    img {
      width: 100%;
      height: 212px;
    }
  }
  .info {
    width: 100%;
    padding: 0 10px;
    background-color: #fff;
    .title {
      margin-top: 20px;
      overflow: hidden;
      .p1 {
        margin-top: 15px;
        margin-bottom: 12px;
        font-size: 18px;
      }
      .p2 {
        display: inline-block;
        height: 20px;
        background-color: #e1f5f8;
        font-size: 14px;
        color: #39becd;
      }
    }

    .houseInfo {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      padding: 15px 0;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      .first {
        display: flex;
        flex-direction: column;
        align-items: center;
        h3 {
          margin-bottom: 4px;
          font-size: 18px;
          color: #fa5741;
          span {
            font-size: 14px;
          }
        }
        p {
          font-size: 14px;
        }
      }
    }

    .houseDesc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 5px;
      height: 70px;
      .div {
        width: 150px;
        display: flex;
        font-size: 14px;
        .right {
          margin-left: 8px;
        }
        .left {
          color: #9999b3;
        }
      }
    }
  }

  .map {
    margin-top: 12px;
    background-color: #fff;
    overflow: hidden;
    .head {
      margin: 10px;
      display: flex;
      align-items: center;
      .p1 {
        margin-right: 8px;
        font-size: 14px;
        color: #9999b3;
      }
    }
    .pic {
      height: 145px;
      .map {
        width: 100%;
        height: 145px;
      }
    }
  }

  .houseSup {
    background-color: #fff;
    overflow: hidden;
    .head {
      margin: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
    }
    .icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 140px;
      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 70px;
        height: 50px;
      }
    }
  }

  .recommend {
    padding: 15px;
    margin-top: 10px;
    background-color: #fff;
    overflow: hidden;
    .head {
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
    }
    .description {
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          padding: 15px 0;
          .avatar {
            width: 52px;
            height: 52px;
            img {
              width: 100%;
              height: 52px;
              border-radius: 50%;
            }
          }
          .user {
            margin-left: 12px;
            .renz {
              margin-top: 5px;
              font-size: 14px;
              color: #fa6f6a;
            }
          }
        }
        .right {
          width: 75px;
          height: 30px;
          border: 1px solid pink;
          text-align: center;
          line-height: 30px;
          color: pink;
        }
      }
      .bottom {
        p {
          font-size: 14px;
        }
      }
    }
  }

  .footer {
    padding: 15px;
    margin-top: 10px;
    background-color: #fff;
    overflow: hidden;
    .head {
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
